<%@ page language="java" contentType="text/html;charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="<c:url value='/js/jquery.form.js'/>"></script>
<script type="text/javascript">
    $(document).ready(function() {
        /*  var options = {
             success : function(data) {
                 $("#working-area").html(data);
             }
         };
         $("#add-group-form").ajaxForm(options); */
    });
    function jumpTo(url) {
        $.ajax({
            type : "GET",
            async : false, //同步请求  
            url : url,
            timeout : 1000,
            success : function(projects) {
                $("#working-area").html(projects);//要刷新的div  
            },
            error : function() {
                alert("ERROR!");
            }
        });
    }
</script>

<div class="page-header">
    <h3 style="margin-top: auto">项目</h3>
</div>
<div class="row-fluid">
    <table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>名称</th>
            <th>类别</th>
            <th>创建者</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:set var="index" value="0" />  
        <c:forEach items="${userProjects}" var="userProject" varStatus="status">
            <c:choose >
            <c:when test="${!userProject.project.deleted}">
            <tr>
                <td>${index+1} <c:set var="index" value="${index+1}" />  </td>
                <td>${userProject.project.name}</td>
                <td>${userProject.project.pgroup.name}</td>
                <td>${userProject.project.owner.username}</td>
                <td>
                    <div class="btn-group">
                        <button class="btn" onclick="showProjectInfo('${userProject.project.description}')">
                            <i class="icon-search"></i>&nbsp;详细信息
                        </button>
                        <button class="btn" name="" onClick="showDeletePanel('${userProject.project.id}', this)">
                            <i class="icon-trash"></i>&nbsp;删除
                        </button >
                        <c:choose>
                            <c:when test="${userProject.admin}">
                                <button class="btn" name=""
                                    onClick="jumpTo('/ManEnv/project/list/${userProject.project.id}/user')">
                                    <i class="icon-pencil"></i>&nbsp;成员管理
                                </button>
                            </c:when>
                        </c:choose>
                    </div>
                </td>
            </tr>
            </c:when>
            </c:choose>
        </c:forEach>
        </tbody>
    </table>
</div>

<div class="modal hide fade" id="project-info-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>项目详细信息</h3>
    </div>
    <div class="modal-body">
        <p id="project-info"></p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-project-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除项目</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除项目?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-project-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<script type="text/javascript">
    function deleteProject(projectId, deleteBtn) {
     	$.ajax({
            url : '/ManEnv/project/' + projectId + '/delete',
            type : 'DELETE',
            success : function(data) {
                 if (data.result == "true") {
                      alert("删除成功!");
                      $(deleteBtn).parents("tr").remove(); // 删除第一个tr元素
                 } else {
                      alert("删除失败!");
                 }
            }
    	});

    }
    
    function showDeletePanel(projectId, deleteBtn){
        $("#delete-project-panel").modal({
            "show" : true,
            "backdrop" : false
        });
        $("#delete-project-btn").click(function(){
        	deleteProject(projectId, deleteBtn);
        });
    }
    
    function showProjectInfo(data){
        $("#project-info").html(data);
        $("#project-info-panel").modal({"show":true, "backdrop":false});
    }
</script>

<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

